<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎登录</div>
    <div class="dashboard-text">用户名：{{name}}</div>
    <div class="dashboard-text">角色名：
      <span v-for='role in roles' :key='role'>{{role}}</span>
    </div>
  </div>
</template>
<template>
    <div class="banner-text">
      <h2>Emsite</h2>
      <i class="icon-shandian" style="font-size: 30px !important" ></i>               
      <i class="icon-quanping" style="font-size: 30px !important" ></i>                  
      <i class="icon-tuichu" style="font-size: 30px !important" ></i>                    
      <i class="icon-tuichuquanping" style="font-size: 30px !important" ></i>            
      <i class="icon-yanzhengma" style="font-size: 30px !important" ></i>                
      <i class="icon-navicon" style="font-size: 30px !important" ></i>                   
      <i class="icon-yuan" style="font-size: 30px !important" ></i>                      
      <i class="icon-quanxian" style="font-size: 30px !important" ></i>                  
      <i class="icon-debug" style="font-size: 30px !important" ></i>                     
      <i class="icon-caidanguanli" style="font-size: 30px !important" ></i>              
      <i class="icon-suoping" style="font-size: 30px !important" ></i>          
      <i class="icon-yonghuguanli" style="font-size: 30px !important" ></i>              
      <i class="icon-yonghu" style="font-size: 30px !important" ></i>                    
      <i class="icon-mima" style="font-size: 30px !important" ></i>                      
      <i class="icon-shouji" style="font-size: 30px !important" ></i>                    
      <i class="icon-jiaoseguanli" style="font-size: 30px !important" ></i>              
      <i class="icon-xitongguanli"  style="font-size: 30px !important" ></i>       
      <i class="icon-wendangguanli"  style="font-size: 30px !important" ></i>  
      <i class="icon-client"  style="font-size: 30px !important" ></i>      
      <i class="icon-bumenguanli"  style="font-size: 30px !important" ></i>           
      <i class="icon-shujuzidian"  style="font-size: 30px !important" ></i>               
      <i class="icon-xiazai"  style="font-size: 30px !important" ></i>      
      <i class="icon-rizhiguanli"  style="font-size: 30px !important" ></i>        
      <i class="icon-jiankong"  style="font-size: 30px !important" ></i> 
      <i class="icon-luyou" style="font-size: 30px !important" ></i>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  name: 'dashboard',
  computed: {
    ...mapGetters(['name', 'roles'])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.banner-text {
  position: relative;
  padding: 0 20px;
  font-size: 20px;
  text-align: center;
  color: #333;
}
</style>
